<script setup lang="ts">
import { useNavigation } from '@/hooks/navigation'
import { useGlobalStore } from '@/store/global'
import { loadImg } from '@/utils'
import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { storeToRefs } from 'pinia'
import { Autoplay, Pagination } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { computed, ref, watch } from 'vue'
// @ts-ignore
import 'swiper/css'
// @ts-ignore
import 'swiper/css/pagination'

defineOptions({
  name: 'Banner',
})

const { type = 'banner' } = defineProps<{ type?: 'banner' | 'wide' }>()

const modules = [Autoplay, Pagination]
const { banner, wide } = storeToRefs(useGlobalStore())

const { openRemotePage } = useNavigation()

const data = computed(() => {
  return type === 'banner' ? banner.value : wide.value
})
const loading = ref(true)

watch(data, (val) => {
  if (!val)
    return
  if (val.length > 0) {
    Promise.all(val.map(item => loadImg(item.ImgUrl))).then(() => {
      loading.value = false
    })
  }
  else {
    loading.value = false
  }
})
</script>

<template>
  <ElSkeleton animated :loading="loading">
    <template #template>
      <div class="bg-white brd8" style="height: 200px">
        <ElSkeletonItem variant="image" class="w100% h100%" />
      </div>
    </template>
    <template #default>
      <Swiper
        class="w100%"
        :modules="modules"
        :autoplay="{ delay: 3000, disableOnInteraction: false }"
        :loop="true"
        :pagination="{ clickable: true }"
      >
        <SwiperSlide
          v-for="(item, index) in data"
          :key="index"
          class="w100%"
          :virtual-index="index"
        >
          <img
            class="w100% rd-8"
            :class="{ pointer: item.ImgHref }"
            style="max-height: 300px"
            :src="item.ImgUrl"
            alt=""
            @click="openRemotePage(item.ImgHref)"
          >
        </SwiperSlide>
      </Swiper>
    </template>
  </ElSkeleton>
</template>

<style lang="scss">
.swiper {
  .swiper-pagination-bullet-active {
    background: var(--main-color) !important;
  }
  .swiper-pagination-bullet {
    width: 30px;
    height: 6px;
    border-radius: 2px;
  }
}
</style>
